<template>
	<view>
		<view class="task">
			<view class="selectedTask">
				<image src="/static/images/selected-task.png"></image>
				<text class="taskTitle">精选任务</text>
				<text>先到先得,赶紧抢货</text>
			</view>
			<view class="taskDetail">
				<scroll-view scroll-x="true" class="scroll">
					<view class="scrollItem">
						<view class="itemTitle">
							关注赚现金
						</view>
						<view class="itemName">
							抖音关注@小宁爱健身
						</view>
						<view class="itemPrice">
							¥1元
						</view>
						<view class="orderReceiving">
							<image src="/static/images/background2.png"></image>
							<view class="order">接单</view>
						</view>
					</view>
					<view class="scrollItem1">
						<view class="itemTitle1">
							关注赚现金
						</view>
						<view class="itemName">
							抖音关注@小宁爱健身
						</view>
						<view class="itemPrice">
							¥1元
						</view>
						<view class="orderReceiving">
							<image src="/static/images/background3.png"></image>
							<view class="order">接单</view>
						</view>
					</view>
					<view class="scrollItem2">
						<view class="itemTitle2">
							关注赚现金
						</view>
						<view class="itemName">
							抖音关注@小宁爱健身
						</view>
						<view class="itemPrice">
							¥1元
						</view>
						<view class="orderReceiving">
							<image src="/static/images/background3.png"></image>
							<view class="order">接单</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="less">
.task {
	margin: 20rpx 0 20rpx 25rpx;
	.selectedTask {
		width: 690rpx;
		image {
			width: 24rpx;
			height: 30rpx;
			vertical-align: middle;
		}
		text {
			vertical-align: middle;
			font-size: 22rpx;
			font-weight: 500;
			color: #333333;
		}
		.taskTitle {
			margin: 0 10rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.taskDetail {
		margin-top: 15rpx;
		.scroll {
			overflow: hidden;
			white-space: nowrap;
			.scrollItem, .scrollItem1,.scrollItem2 {
				position: relative;
				width: 303rpx;
				height: 185rpx;
				background: linear-gradient(90deg, #EBE8FE 0%, #F5F3FF 100%);
				border-radius: 6rpx;
				padding: 15rpx;
				line-height: 50rpx;
				display: inline-block;
				margin-right: 20rpx;
				view {
					font-size: 24rpx;
					font-weight: 500;
					color: #A49AD2;
				}
				.itemTitle {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #7062AF;
				}
				.orderReceiving {
					position: absolute;
					bottom: 25rpx;
					right: 15rpx;
					width: 161rpx;
					height: 36rpx;
					image {
						width: 100%;
						height: 100%;
					}
					.order {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
			.scrollItem1 {
				background: linear-gradient(90deg, #F8EBD2 0%, #FBF7EB 100%);
				view {
					color: #A57C39;
				}
				.itemTitle1 {
					color: #A57C39;
				}
			}
			.scrollItem2 {
				background: linear-gradient(90deg, #F7E9E4 0%, #F9F3F1 100%);
				view {
					color: #E6B7A4;
				}
				.itemTitle2 {
					color: #D88A6A;
				}
			}
		}
	}
}
</style>
